<template>
	<view class="card">
		<!-- 地图展示 -->
		<map class="map-container" :longitude="mapConfig.longitude" :latitude="mapConfig.latitude" scale="17"
			:markers="markers" :polyline="polyline" :show-compass="false" :show-location="false">
			<!-- 配送位置标注 -->
			<!-- <cover-view class="map-tip" v-for="(item, index) in logisticsInfo.history" :key="index">
				<text>{{ item.location }}</text>
			</cover-view> -->
		</map>
		<image :src="imgUrl+'logis-img.png'" mode="" class="img"></image>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				imgUrl:this.$imgUrl,
				mapConfig: {
					latitude: 0, // 地图中心纬度
					longitude: 0, // 地图中心经度
				},
				markers: [], // 地图标记点
				polyline: [], // 配送路线折线
				logisticsInfo: {
					company: "顺丰快递",
					status: "运输中",
					history: [{
							time: "2024-11-01 10:00",
							location: "上海",
							latitude: 31.2304,
							longitude: 121.4737
						},
						{
							time: "2024-11-01 12:00",
							location: "南京",
							latitude: 32.0617,
							longitude: 118.7778
						},
						{
							time: "2024-11-02 15:00",
							location: "北京",
							latitude: 39.9042,
							longitude: 116.4074
						}
					]
				}
			};
		},
		watch: {
			logisticsInfo: {
				immediate: true,
				handler(newValue) {
					if (newValue && newValue.history) {
						this.setMapData(newValue.history);
					}
				}
			}
		},
		methods: {
			// 设置地图标记和路线
			setMapData(history) {
				if (history.length === 0) return;

				// 设置地图中心为第一个配送位置
				const firstLocation = history[0];
				this.mapConfig.latitude = firstLocation.latitude;
				this.mapConfig.longitude = firstLocation.longitude;

				// 设置标记点
				this.markers = history.map((item, index) => ({
					id: index,
					latitude: item.latitude,
					longitude: item.longitude,
					title: item.location,
					iconPath: '/static/marker.png', // 可替换为自定义图标
					width: 30,
					height: 30,
				}));

				// 设置配送路线折线
				this.polyline = [{
					points: history.map(item => ({
						latitude: item.latitude,
						longitude: item.longitude,
					})),
					color: '#FF0000DD',
					width: 4,
					dottedLine: false,
				}];
			},
		}
	};
</script>

<style scoped>
	.card {
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.map-container {
		width: 100%;
		height: 150px;
	}
	.img{
		width: 100%;
		height: 1004rpx;
	}
	
</style>